<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>喂养详情</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<style>
    html,body,p{
        margin: 0;
        padding: 0;
        font-size: 12px;
    }
    body{
        background: #f5f5f5;
    }
    header{
        text-align: center;
        margin:10px 0 ;
        font-size: 20px;
    }
    .card{
        background: #ffffff;
        margin: 10px;
        padding: 10px;
        border-radius: 5px;
    }
    .card-head{
        font-size: 15px;
        font-weight: bold;
        color: #000;
        position: relative;
        padding-left: 10px;

    }
    .card-head:before{
        display: block;
        content: "";
        width: 3px;
        height: 14px;
        background: #FFA935;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        position: absolute;
        left: 0;
        top: 3px;
    }
    .card-item{
        margin: 10px 0;
        font-size: 13px;
    }

    .card-item-label{
        font-weight: bold;
        color: #000;
        width: 70px;
        display: block;
    }
    .card-item-title{
        color: #9E9E9E;
        margin-top: 6px;
        display: block;
    }

    .alert{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #02020270;
        justify-items: center;
        align-items: center;
        display: none;
    }
    .alert-content{
        background: #fff;
        margin: 10px;
        border-radius: 5px;
        overflow: hidden;
        width: 100%;
        position: relative;
        min-height: 80px;
        padding: 10px;
    }
    .alert-close{
        position: absolute;
        right: 10px;
        top: 10px;
    }
    .alert-close svg{

        width: 20px;
        height: 20px;
    }
    .alert-html{
        text-align: center;
    }
</style>
<body>
<header>喂养信息</header>
 <div id="app">
     <div class="card">
         <div class="card-head"><label>订单信息</label></div>
         <div class="card-item">
             <label class="card-item-label">订单ID</label>
             <label class="card-item-title">{{$id}}</label>
         </div>
         <div class="card-item">
             <label class="card-item-label">服务专员</label>
             <label class="card-item-title">{{$personnel}}</label>
         </div>

         <div class="card-item">
             <label class="card-item-label">服务对象</label>
             <label class="card-item-title">{{$pets_name}}</label>
         </div>
         <div class="card-item">
             <label class="card-item-label">上门时间</label>
             {{--        <label class="card-item-title">{{$start_date}}</label>--}}
         </div>
         <div class="card-item">
             <label class="card-item-label">服务地址</label>
             <label class="card-item-title">{{$service_address}}{{$service_address_desc}}</label>
         </div>
         <div class="card-item">
             <label class="card-item-label">入户交接</label>
             <label class="card-item-title">{{$handover}} {{$handover_other}}</label>
         </div>

     </div>
     <div class="card">
         <div class="card-head"><label>服务项目</label></div>
         @foreach($service_projects as $k=>$v)
             <div class="card-item">
                 <label class="card-item-label">{{$v['title']}}：
                 </label>
                 <label class="card-item-title">{{$v['desc']}}</label>
             </div>
         @endforeach


     </div>
     <div class="card">
         <div class="card-head"><label>其他需求</label></div>
         @foreach($service_project_needs as $k=>$v)
             <div class="card-item">
                 <label class="card-item-img" data="{{$v['image']}}">
                     <img src="{{$v['image']}}" style="height: 100px;" >
                 </label>
                 <label class="card-item-title">{{$v['explain']}}</label>
             </div>
             <div style="border-bottom: 1px dotted #d2d2d2"></div>
         @endforeach
     </div>
     <div class="alert">
         <div class="alert-content">
             <div class="alert-close">
                 <svg t="1656321928739" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2756" width="1200" height="1200"><path d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128.287273c-211.584464 0-383.712727 172.128262-383.712727 383.712727 0 211.551781 172.128262 383.712727 383.712727 383.712727 211.551781 0 383.712727-172.159226 383.712727-383.712727C895.712727 300.415536 723.551781 128.287273 512 128.287273z" p-id="2757"></path><path d="M557.05545 513.376159l138.367639-136.864185c12.576374-12.416396 12.672705-32.671738 0.25631-45.248112s-32.704421-12.672705-45.248112-0.25631l-138.560301 137.024163-136.447897-136.864185c-12.512727-12.512727-32.735385-12.576374-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.248112l136.255235 136.671523-137.376804 135.904314c-12.576374 12.447359-12.672705 32.671738-0.25631 45.248112 6.271845 6.335493 14.496116 9.504099 22.751351 9.504099 8.12794 0 16.25588-3.103239 22.496761-9.247789l137.567746-136.064292 138.687596 139.136568c6.240882 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.05545 513.376159z" p-id="2758"></path></svg>
             </div>
             <div class="alert-html">

             </div>
         </div>
     </div>
 </div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<link
    rel="stylesheet"
    href="https://unpkg.com/vant@2.12/lib/index.css"
/>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
<script>
        // $('.card-item-img').click(function () {
        //     $('.alert').css('display','flex');
        //     let src=$(this).attr('data');
        //     $('.alert-html').append('<img src="'+src+'" style="width: auto;height: 400px" />')
        // })
        //
        // $('.alert-close').click(function () {
        //     $('.alert').css('display','none');
        //     $('.alert-html').empty();
        // })

        // 在 #app 标签下渲染一个按钮组件
        new Vue({
            el: '#app',
        });

        // 调用函数组件，弹出一个 Toast
        // vant.Toast('提示');

        // 通过 CDN 引入时不会自动注册 Lazyload 组件
        // 可以通过下面的方式手动注册
        Vue.use(vant.Lazyload);

</script>
</html>
